<script setup lang="ts">
import { queryShadePolygon } from "@/api/pipe";
import { LGeoJson } from "@vue-leaflet/vue-leaflet";
import { diffence } from "@/utils/map";
import { useMap } from "@/views/report/device/components/Map/index.vue";
const feature = ref(null);
const { L }: any = window;
const getData = async () => {
  const result = await queryShadePolygon({ pageSize: 10, pageIndex: 1 });
  const { data, succeeded }: any = result;
  if (succeeded) {
    const { items } = data;
    if (items.length > 0) {
      try {
        const geometry = JSON.parse(items[0].jsonGeom);
        const features = diffence(geometry.coordinates);
        feature.value = { type: "FeatureCollection", features: [features] };
        const map = useMap();
        if (map) {
          const bounds = L.geoJSON(geometry).getBounds();
          setTimeout(() => map.fitBounds(bounds), 500);
        }
      } catch (e) {
        console.log("范围边界解析报错", e);
      }
    }
  }
};
onMounted(() => {
  getData();
});
</script>

<template v-if="feature">
  <LGeoJson
    :geojson="feature"
    :optionsStyle="{ opacity: 0, fillColor: 'rgb(0,0,0)', fillOpacity: 0.8 }"
  />
</template>

<style scoped lang="scss"></style>
